﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>系统文章新增/修改</title>
  <link rel="stylesheet" href="../../inc/layui/css/layui.css">
  <style>
    .layui-form-select dl {
      z-index: 1000
    }
  </style>
</head>

<body>
  <div id="form" class="layui-form" style="margin-top: 20px">

    <div class="layui-form-item">
      <label class="layui-form-label">标题</label>
      <div class="layui-input-inline">
        <input value="" type="text" name="articlename" lay-verify="required" autocomplete="off" placeholder="请输入标题"
          class="layui-input" />
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">封面</label>
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="uploadImg"><i class="layui-icon">&#xe67c;</i>上传图片</button>
        <span class="f12" style="margin-left: 10px;">建议：250px*250px</span>
        <div id="banner" class="layui-form-item" style="margin: 10px 20px 0px 110px;">
        </div>
      </div>
      <input type="hidden" name="bannerImg" id="bannerImg" value="">
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">轮播图</label>
      <div class="layui-upload">
        <button type="button" class="layui-btn" id="uploadLb"><i class="layui-icon">&#xe67c;</i>上传轮播</button>
        <span class="f12" style="margin-left: 10px;">建议：250px*250px</span>
        <div id="lb" class="layui-form-item" style="margin: 10px 20px 0px 110px;display: flex;">
        </div>
      </div>
      <input type="hidden" name="lbImgs" id="lbImgs" value="" style="width: 100%;">
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">视频</label>
      <div class="layui-input-inline">
        <button type="button" class="layui-btn" id="uploadVideo"><i class="layui-icon">&#xe67c;</i>上传视频</button>
        <div id="vide_mp4" class="layui-form-item" style="margin: 10px 20px 0px 0px;display: flex;">
        </div>
      </div>
      <input type="hidden" name="lbVideo" id="lbVideo" value="" style="width: 100%;">
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别</label>
      <div class="layui-input-inline">
        <select name="articletype" lay-filter="articletype" id="articletype" lay-filter="articletype"
          lay-verify="required">
          <!-- <option value="1">系统文章</option> -->
          <!-- <option value="2">资讯快报</option> -->
          <option value="3" selected>帮助文档</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否启用</label>
      <div class="layui-input-inline">
        <select name="enable" lay-filter="enable" id="enable" lay-filter="enable" lay-verify="required">
          <option value="">请选择</option>
          <option value="1">启用</option>
          <option value="0">禁用</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">详情</label>
      <div class="layui-input-block">
        <textarea id="editor" style="display: none;"></textarea>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-layer-btn">
        <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
        <button class="layui-btn layui-btn-primary" id="closeform">关闭</button>
      </div>
    </div>
  </div>

</body>
<script type="text/javascript" src="../../inc/layui/layui.js"></script>
<script type="text/javascript" src="../../inc/g.js"></script>
<!-- <script src="../../inc/tinymce/tinymce.min.js"></script> -->
<script src="../../inc/ace/ace.js"></script>
<script type="text/javascript" src="../../inc/area.js"></script>
<script type="text/javascript">
  let type = Comm.query("type");
  var lbImgs = [];

  function cx(d) {
    $("#a_" + d).css('display', 'block');
    $("#img_" + d).css('background', '#000');
    $("#img_" + d).css('opacity', '0.3');
  }

  function xs(d) {
    $("#a_" + d).css('display', 'none');

    $("#img_" + d).css('background', '');
    $("#img_" + d).css('opacity', '');
  }

  function remove(d) {
    var img = document.getElementById("img_" + d);
    var path = img.src;
    if (path) {
      var url = path.replace(config.ossroot, "");
      for (var i = 0; i < lbImgs.length; i++) {
        if (lbImgs[i] == url)
          lbImgs.splice(i, 1);
      }
    }
    var son = document.getElementById("div_" + d);
    son.parentNode.removeChild(son);
    $("#lbImgs").val(lbImgs.join(","));
    console.log("删除成功")
  }

  //加载页面
  function pageload() {
    $("#closeform").click(function () {
      //关闭当前选项卡第一个参数是选项卡的名称，跟添加是对应，第二个参数如果为true会刷新上一个选项卡的列表页,不填写也是 不刷新
      parent.cms.deltab();
    })
    //表单提交
    Comm.form.on('submit(sub)', function (data) {
      console.log(data.field);
    })


    var ieditor = layedit.build('editor');

    layui.use('upload', function () {
      var upload = layui.upload;
      //上传视频
      var uploadVideo = upload.render({
        elem: '#uploadVideo', //绑定元素
        url: config.root + 'file/upload/server/video', //上传接口
        accept: "video",
        headers: {
          'Authorization': Comm.db("Authorization")
        },
        done: function (res) {
          console.log(res)
          //上传完毕回调
          if (res.code == 1) {
            if (res.data) {
              //var banner = '<img src="' + Comm.OSS.getImgUrl(res.data) + '" style="width:150px;height:150px">'
              var html = '<video controls="" name="media"><source src="' + Comm.OSS.getImgUrl(res
                .data) + '" type="video/mp4"></video>';
              $("#vide_mp4").html(html);
              $("#lbVideo").val(res.data);
            }
          }
        },
        error: function () {
          //请求异常回调
          console.log("请求异常回调")
        }
      });
      //单次上传单图
      var uploadImg = upload.render({
        elem: '#uploadImg', //绑定元素
        url: config.root + 'file/upload/server/img', //上传接口
        headers: {
          'Authorization': Comm.db("Authorization")
        },
        done: function (res) {
          console.log(res)
          //上传完毕回调
          if (res.code == 1) {
            if (res.data) {
              var banner = '<img src="' + Comm.OSS.getImgUrl(res.data) + '" style="width:150px;height:150px">'
              $("#banner").html(banner);
              $("#bannerImg").val(res.data);
            }
          }
        },
        error: function () {
          //请求异常回调
          console.log("请求异常回调")
        }
      });
      //多次上传多图
      var index = 1;
      var uploadLb = upload.render({
        elem: '#uploadLb', //绑定元素
        url: config.root + 'file/upload/server/img', //上传接口
        headers: {
          'Authorization': Comm.db("Authorization")
        },
        done: function (res) {
          console.log(res)
          //上传完毕回调
          if (res.code == 1) {
            if (res.data) {
              var html = '<div id="div_' + index + '" style="margin-right:20px;">' +
                '<img id="img_' + index + '" src="' + Comm.OSS.getImgUrl(res.data) +
                '" style="width:150px;height:150px;"' +
                'onmouseenter ="cx(' + index + ')" onmouseleave="xs(' + index + ')"/>' +
                '<img id="a_' + index +
                '" src="../../img/del.png"style="display:none;position:absolute;width:50px;height:50px;margin-top:-150px;margin-top: -95px; margin-left: 50px;"' +
                'onmouseenter ="cx(' + index + ')" onmouseleave="xs(' + index + ')" onclick="remove(' +
                index + ')"/>' +
                '</div>';
              $("#lb").append(html);
              index++;
              lbImgs.push(res.data);
              $("#lbImgs").val(lbImgs.join(","));
            }
          }
        },
        error: function () {
          //请求异常回调
          console.log("请求异常回调")
        }
      });
    });
  }
</script>

</html>